<template>
  <div>
    <div ref="condationHeight" class="ml20">
      <condition-inquery :systemsLiteList="systemsLiteList" @searchFn="searchFn" @downloadFn="downloadFn" />
    </div>
    <div class="pl20 pr20">
      <el-tabs
        v-loading="loading"
        element-loading-text="加载中..."
        element-loading-spinner="el-icon-loading"
        v-model="services"
        style="position: relative;padding-top: 40px"
      >
        <el-tab-pane
          v-for="(tabItem, tabIdx) in tabsList"
          :key="tabIdx"
          :label="tabItem.label"
          :name="tabItem.value"
          style="height: 100%">
          <!-- <div v-if="listData.length > 0">
            <div
              v-for="(item, index) in listData"
              :key="index"
              class="pl5 pt25 pb25 clr_333 f14"
              :class="{'pt10i': index === 0}"
              style="border-bottom: 1px dashed #C1C1C1;line-height: 26px">
              <div>
                记录时间：{{ item.log_time }}
              </div>
              <div>
                线 程 ID：{{ item.thread_id }}
              </div>
              <div>
                日志等级：{{ item.log_mode }}
              </div>
              <div>
                日志类型：{{ item.log_type }}
              </div>
              <div>
                方法名称：{{ item.method_name }}
              </div>
              <div v-html="log_contentTrans(item.log_content)"></div>
            </div>
          </div> -->
          <el-table
            :data="listData"
            height="calc(100vh - 285px)"
            border
            ref="mytable"
            :header-cell-style="{background: '#F5F5F5',color: '#333'}"
            highlight-current-row
            header-row-class-name="strong"
          >
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-form label-position="left" inline class="demo-table-expand">
                   <el-form-item label="日志内容：">
                      <span>{{ props.row.log_content }}</span>
                    </el-form-item>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column
              v-for="(item, index) in propData"
              :key="index"
              :prop="item.prop"
              :label="item.label"
              :width="item.width"
              :formatter="item.formatter"
              :show-overflow-tooltip="true"
              align="center">
            </el-table-column>
          </el-table>
          <!-- <div class="NoDataContent tc">暂无数据</div> -->
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 分页 -->
    <div ref="paginationHeight">
      <pagination-tool
        :total="total"
        :page.sync="listQuery.page_index"
        :limit.sync="listQuery.page_size"
        @pagination="getLog"
      />
    </div>
  </div>
</template>

<script>
import ConditionInquery from "./components/ConditionInquery"; // 查询条件
import PaginationTool from "@/components/common/PaginationTool"; // 分页
export default {
  name: "index",
  data() {
    return {
      systemsLiteList: [], // 系统名称
      formData: {},
      total: 10000,
      listQuery: {
        page_index: 1,
        page_size: 20,
      },
      service_type:1,
      services: "archive", // 服务类型 （qr-查询获取、store-存储、mwl-工作列表、match-匹配、archive-归档）
      servicesLabel: '',
      listData: [],
      tabsList: [
        { label: "归档", value: "archive" },
        { label: "查询获取", value: "qr" },
        { label: "工作列表", value: "mwl" },
        { label: "存储", value: "store" },
        { label: "匹配", value: "match" },
      ],
      loading: false,
      propData: [
        {prop: 'log_time', label: '记录时间', width: '250', formatter: null},
        {prop: 'thread_id', label: '线程ID', width: '100', formatter: null},
        {prop: 'log_mode', label: '日志等级', width: '150', formatter: null},
        {prop: 'log_type', label: '日志类型', width: '350', formatter: null},
        {prop: 'method_name', label: '方法名称', width: '150', formatter: null},
        {prop: 'log_content', label: '日志内容', width: '', formatter: null},
      ]
    };
  },
  watch: {
    services(newVal) {
      this.getLog();
    },
  },
  methods: {
    log_contentTrans(val) {
      if (val) {
        return "日志内容：" + val.replace(/\n/g, "<br/>");
      } else {
        return "";
      }
    },
    // 日志下载
    async downloadFn (time) {
      const startTime = time.split('-').join('');
      this.tabsList.forEach(item => {
        if (this.services === item.value) {
          this.servicesLabel = item.label;
        }
      });
      this.formData = {
        log_mode: -1,
        filter: '',
        startDateTime: time,
        endDateTime: time,
        services: this.services,
        service_type:this.service_type,
      };
      const params = Object.assign(this.formData, this.listQuery);
      const res = await this.$pacsApi.pacsApi.getLog(params);
      const { data } = res;
      // this.getLog();
      if (data.length === 0) {
        this.$message.error(`在${startTime}当天${this.servicesLabel}服务中暂无日志数据`);
        return;
      }
      this.$confirm('当前暂只支持下载开始时间当天日志，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.downloadInfo(startTime);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消下载'
        });          
      });
    },
    async downloadInfo (startTime) {
      const params = {
        service: this.formData.services,
        date: startTime,
        service_type:this.service_type,

      };
      const res = await this.$pacsApi.pacsApi.downloadLog(params);
      let blob = new Blob([res], { type: 'text/plain' });
      const fileName = `${this.servicesLabel}${startTime}`;
      if ('download' in document.createElement('a')) { // 非IE下载
        const elink = document.createElement('a');
        elink.download = fileName;
        elink.style.display = 'none';
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click();
        URL.revokeObjectURL(elink.href); // 释放URL 对象
        document.body.removeChild(elink);
      } else { // IE10+下载
        navigator.msSaveBlob(blob, fileName);
      }
    },
    searchFn(params) {
      // 搜素
      this.listQuery.page_index = 1; // 重置页数
      this.formData = params;
      this.service_type = params.service_type
      this.getLog();
    },
    async getLog() {
      // 获取列表
      this.loading = true;
      this.formData.services = this.services;
      const data = Object.assign(this.formData, this.listQuery);
      this.$pacsApi.pacsApi.getLog(data).then((res) => {
        const { code, data, page } = res;
        if (code === 0) {
          this.listData = data;
          this.total = page.total_count;
        }
        this.loading = false;
      });
    },
    async getSystemsLiteList() {
      let res = await this.$pacsApi.pacsApi.getSystemsLiteList({ type: 1 });
      let { code, data } = res;
      if (code === 0) {
        this.systemsLiteList = data;
      }
    },
  },
  mounted() {
    this.getSystemsLiteList(); // 获取系统名称
  },
  components: {
    ConditionInquery,
    PaginationTool
  },
};
</script>

<style lang="less" scoped>
/deep/.el-tabs--border-card > .el-tabs__header .el-tabs__item {
  color: #333;
  &.is-active {
    color: #0a70b0;
  }
}
/deep/.el-tabs .el-tabs__header {
  position: absolute;
  top: 0;
  z-index: 1000;
  width: 100%;
}
/deep/.el-tabs__content {
  /*height: 750px;*/
  height: calc(100vh - 285px);
  overflow-y: auto;
}
.NoDataContent {
  background: url("../../../assets/images/common/NoData.png") no-repeat center
    center;
  height: calc(100vh - 50px - 76px - 10px - 100px - 20px - 55px - 40px - 40px);
  line-height: calc(100vh - 50px - 76px - 40px);
  color: #909399;
}
.pt10i {
  padding-top: 10px !important;
}
/deep/.demo-table-expand {
  font-size: 0;
}
/deep/.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
  overflow: auto;
}
/deep/.el-form-item__content {
  line-height: 25px;
}
/deep/.el-form--inline .el-form-item__label {
  line-height: 25px;
}
</style>
